<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>管理后台-列表</title>
    <header th:replace="header::html"></header>
</head>
<body>
<div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="#">首页</a>
            <a href="#">Test管理</a>
            <a><cite>列表</cite></a>
        </span>
    <a class="layui-btn layui-btn-small refresh" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh"></i>
    </a>
</div>
<div class="x-body">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body" permission="test:query">
                    <form class="layui-form layui-col-space5">
                        <!-- 根据自己需求修改查询条件 -->
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="field1" placeholder="请输入内容" class="layui-input">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="search">
                                <i class="layui-icon layui-icon-search"></i>
                            </button>
                        </div>
                    </form>
                </div>
                <div class="layui-card-header">
                    <button class="layui-btn" onclick="xadmin.open('新增Test','/test/add')" permission="test:add">
                        <i class="layui-icon layui-icon-add-circle-fine"></i>添加
                    </button>
                    <button class="layui-btn layui-btn-danger" onclick="batchDelete()" permission="test:del">
                        <i class="layui-icon layui-icon-delete"></i>批量删除
                    </button>
                </div>
                <div class="layui-card-body">
                    <table id="testTable" lay-filter="testTable"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="toolBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit" permission="test:edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del" permission="test:del">删除</a>
</script>
<script type="text/javascript">
    var table;

    layui.use(['table', 'form', 'layer'], function () {
        table = layui.table;
        var form = layui.form,
            layer = layui.layer;

        // 表格渲染
        renderTable(new FormData());

        // 监听工具条
        table.on('tool(testTable)', function (obj) {
            var data = obj.data;

            // 编辑操作
            if (obj.event === 'edit') {
                xadmin.open('编辑信息', '/test/edit?id=' + data.id);
            } else if (obj.event === 'del') { // 删除操作
                layer.confirm('确认要删除吗？', function (index) {
                    // 发送请求异步删除数据
                    $.ajax({
                        url: "/test/delete",
                        type: "DELETE",
                        data: {id: data.id},
                        dataType: 'json',
                        success: function (res) {
                            if (res.httpCode != 200 || res.retCode != 0) {
                                layer.alert(res.retMsg);
                            } else {
                                layer.alert("删除成功", {icon: 1});
                                // 刷新表格
                                table.reload('testTable');
                            }
                        }
                    });
                    //关闭弹窗
                    layer.close(index);
                });
            }
        });

        // 搜索功能
        form.on('submit(search)', function (data) {
            // 表格渲染
            renderTable(data.field)
            return false;
        });
    });

    /**
     * 表格渲染
     * @param field
     */
    function renderTable(field) {
        // 表格渲染
        table.render({
            elem: '#testTable',
            url: '/test/list', //数据接口
            page: true, //开启分页
            where: {//查询条件
                // 根据自己需求修改查询条件
                "field1": field.field1
            },
            parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.retCode,     //解析接口状态
                    "msg": res.retMsg,       //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.datas   //解析数据列表
                };
            },
            cols: [
                [   //表头
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'id', title: 'id'},
                    {field: 'field1', title: 'field1'},
                    {field: 'field2', title: 'field2'},
                    {field: 'field3', title: 'field3'},
                    {field: 'field4', title: 'field4'},
                    {field: 'field5', title: 'field5'},

                    {title: '操作', toolbar: '#toolBar', fixed: 'right', width: 150}
                ]
            ]
        });
    }

    /**
     * 批量删除
     */
    function batchDelete() {
        var checkStatus = table.checkStatus('testTable');
        var data = checkStatus.data;
        if (data.length == 0) {
            layer.msg("请选择要删除的数据！");
            return;
        }
        layer.confirm('确认要删除选中的【' + data.length + '】条数据吗？', function (index) {
            var ids = new Array();
            // 遍历所有选择的行数据，取每条数据对应的ID
            for (var i = 0; i < data.length; i++) {
                ids[i] = data[i].id;
            }

            // 发送请求异步删除所有被选中的数据
            $.ajax({
                url: '/test/batchDelete',
                type: "DELETE",
                data: {ids: ids},
                dataType: 'json',
                success: function (res) {
                    if (res.httpCode != 200 || res.retCode != 0) {
                        layer.alert(res.retMsg);
                    } else {
                        layer.alert("删除成功", {icon: 1});
                        // 刷新表格
                        table.reload('testTable');
                    }
                }
            });
            layer.close(index);
        });
    }
</script>
</body>
</html>
